<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      show-action
      placeholder="请输入小区或地址"
      @search="onSearch"
      class="sousuo"
    >
      <template #left>
        <van-icon
          name="arrow-left"
          color="#fff"
          class="my_left_icon"
          @click="left_back"
        />
      </template>
      <template #label>
        <div>
          <span @click="changeCity(CityName)">{{ CityName.label }}</span
          ><span>▾</span>&nbsp;<span style="color: #ccc">|</span>&nbsp;
        </div>
        <!-- <router-link to="/city" @click="changeCity($event.target.innerText)"
          >上海<span>▾</span></router-link
        > -->
      </template>
      <template #action>
        <van-icon
          name="location-o"
          size="25"
          color="#fff"
          class="my-icon"
          @click.native="$router.push('/map')"
        />
      </template>
    </van-search>

    <!-- 级联 -->
    <van-sticky>
      <van-dropdown-menu active-color="#50b979">
        <!-- 区域部分 -->
        <van-dropdown-item title="区域">
          <div class="my_picker">
            <van-picker :columns="columns" />
            <button class="close">取消</button>
            <button class="enter">确定</button>
          </div>
        </van-dropdown-item>
        <!-- 方式方法 -->
        <van-dropdown-item title="方式">
          <div class="my_picker">
            <van-picker :columns="rentType" />
            <button class="close">取消</button>
            <button class="enter">确定</button>
          </div>
        </van-dropdown-item>
        <!-- 租金 -->
        <van-dropdown-item title="租金">
          <div class="my_picker">
            <van-picker :columns="price" />
            <button class="close">取消</button>
            <button class="enter">确定</button>
          </div>
        </van-dropdown-item>

        <!-- 筛选 -->
        <van-dropdown-item
          title="筛选"
          @open="showPopup"
          @close="show = false"
        />
        <van-popup
          v-model="show"
          position="right"
          :overlay="false"
          :style="{ width: '80%', height: '100%' }"
        >
          <!-- 户型 -->
          <div class="last_all">
            <p>户型</p>
            <div class="my_grid">
              <van-tag
                @click.native="$event.target.color = 'red'"
                plain
                v-for="(item, index) in roomType"
                :key="index"
              >
                {{ item.text }}
              </van-tag>
            </div>
          </div>
          <!-- 朝向 -->
          <div class="last_all">
            <p>朝向</p>
            <div class="my_grid">
              <van-tag plain v-for="(item, index) in oriented" :key="index">{{
                item.text
              }}</van-tag>
            </div>
          </div>
          <!-- 楼层 -->
          <div class="last_all">
            <p>楼层</p>
            <div class="my_grid">
              <van-tag plain v-for="(item, index) in floor" :key="index">{{
                item.text
              }}</van-tag>
            </div>
          </div>
          <!-- 房屋亮点 -->
          <div class="last_all">
            <p>房屋亮点</p>
            <div class="my_grid">
              <van-tag
                plain
                v-for="(item, index) in characteristic"
                :key="index"
                >{{ item.text }}</van-tag
              >
            </div>
          </div>
          <div class="my_picker btns">
            <button class="close">取消</button>
            <button class="enter">确定</button>
          </div>
        </van-popup>
      </van-dropdown-menu>
    </van-sticky>
    <!-- 房屋列表 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
      <div
        class="home_list"
        v-for="(item, index) in HouseList"
        :key="index"
        @click="getDetail(item.houseCode)"
      >
        <div class="pic">
          <van-image width="100" height="100" lazy-load :src="item.houseImg" />
        </div>
        <div class="txt">
          <h3 class="mu-row">{{ item.title }}</h3>
          <p class="area">{{ item.desc }}</p>
          <van-tag v-for="(it, index) in item.tags" :key="index">{{
            it
          }}</van-tag>
          <p class="price">
            <span>{{ item.price }}元/月</span>
          </p>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { getCity } from '@/utils/storage'
import { getHouse, getHouseList } from '@/api/house'
export default {
  name: 'find-page',
  data() {
    return {
      value: '',
      CityName: getCity(),
      active: 2,
      columns: [
        {
          text: '暂无',
          children: [
            {
              text: '暂无',
              children: [{ text: '暂无' }]
            }
          ]
        }
      ],
      rentType: [],
      price: [],
      roomType: [],
      oriented: [],
      floor: [],
      characteristic: [],
      HouseList: [],
      show: false,
      loading: false,
      finished: false
    }
  },
  methods: {
    showPopup() {
      this.show = true
      console.log(111)
    },
    onSearch() {},
    changeCity(value) {
      console.log(value)
      this.$router.push('/city')
    },
    left_back() {
      this.$router.back()
      console.log(1111)
      console.log(this.CityName)
    },
    getDetail(id) {
      // await getHousesDetail(id)
      // console.log(res)
      console.log(id)
      this.$router.push(`/housesdetail/${id}`)
    }
  },
  async created() {
    const { body } = await getHouse(getCity().value)
    console.log(this.CityName)
    const res = await getHouseList(this.CityName.value)
    console.log(res)
    console.log(res.body)
    const obj = JSON.parse(JSON.stringify(body).replace(/label/g, 'text'))
    // console.log(obj)

    this.columns.push(obj.area, obj.subway)

    this.columns.forEach((item) => {
      delete item.value
    })
    obj.rentType.forEach((item) => {
      this.rentType.push(item.text)
    })
    obj.price.forEach((item) => {
      this.price.push(item.text)
    })
    this.roomType = obj.roomType
    this.oriented = obj.oriented
    this.floor = obj.floor
    this.characteristic = obj.characteristic
    res.body.list.forEach((item) => {
      item.houseImg = 'http://liufusong.top:8080' + item.houseImg
      this.HouseList.push(item)
    })
    // console.log(this.roomType)
    // console.log(obj)
    // console.log(this.HouseList)
  }
}
</script>

<style scoped lang="less">
.sousuo {
  background-color: #50b979;
  .my-icon {
    transform: translateY(5px);
  }
  a {
    color: #333;
  }
  .my_left_icon {
    margin-right: 8px;
  }
}
.van-dropdown-menu {
  border-bottom: 1px solid #e5e6f0;
}
.van-popup {
  height: 100%;
  // padding: 20px 10px;
  padding-right: 20px;
  overflow: auto;
  // padding: 50px 0;
  .my_picker {
    width: 100%;
    .close {
      width: 30%;
      height: 50px;
      border: none;
    }
    .enter {
      width: 70%;
      height: 50px;
      border: none;
      background-color: #50b979;
    }
  }
  /deep/ .btns {
    position: fixed;
    bottom: 0;
  }
}

.last_all {
  // margin: 30px 5px 0 10px;
  p {
    font-size: 12px;
    color: #333;
    margin: 10px 5px 0 10px;
  }
  .my_grid {
    margin: 20px 0 0 20px;
    border-bottom: 1px solid #e5e6f0;
    // padding: 20px 10px 20px 0;
    padding-bottom: 20px;
    .van-tag {
      display: inline-block;
      width: 70px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      border: 1px solid #ddd;
      color: 888;
      margin: 5px 5px 0;
    }
    // .van-grid-item {
    //   width: 70px;
    //   height: 32px;
    //   font-size: 12px;
    // }
  }
}
.home_list {
  // width: 100%;
  height: 100px;
  // padding-top: 18px;
  margin: 0 18px;
  padding: 10px 0;
  // padding-left: 10px;
  display: flex;
  // flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #e5e6f0;
  .pic {
    // margin: 10px 10px 10px 0;
    margin-right: 10px;
  }
  .txt {
    height: 90px;
    // display: flex;
    // flex-direction: column;
    // justify-content: space-around;
    // align-items:stretch;
    h3 {
      height: 22px;
      font-size: 15px;
      line-height: 22px;
    }
    .area {
      height: 22px;
      color: #afb2b3;
      font-size: 12px;
      line-height: 22px;
    }
    .van-tag {
      display: inline-block;
      height: 18px;
      font-size: 12px;
      line-height: 18px;
      margin: 0 5px 1px 0;
      background-color: #e1f5f8;
      color: #39becd;
      // margin-right: 10px;
      // margin-bottom: 5px;
    }
    .price {
      height: 21px;
      color: #fa5741;
      font-size: 16px;
      line-height: 22px;
      font-weight: 700;
      // margin-top: 5px;
    }
  }
}
</style>
